<template>
	<view>
		<view class="cardBg" v-if="eventList.length>0">
			<uni-section :title="eventList[0].clientid" type="line" />
			<u-steps :current="eventList.length" direction="column" dot class="stepsItem">
				<u-steps-item 
					v-for="(item,index) in eventList" :title="item.title" :key="index"
					:error="item.title=='disconnected'?true:false" :desc="item.desc"></u-steps-item>
			</u-steps>
		</view>
		<u-loading-page style="z-index:9" :loading="loading" loading-text="loading..." bg-color="rgb(0, 0, 0,.3)">
		</u-loading-page>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				eventList: [],
			}
		},
		created() {
			this.getGwData()
		},
		methods: {
			async getGwData() {
				const db = uniCloud.database()
				const res = await db.collection('gateways').where({
					category: 'event',
					name: 'ASCG123456789'
				}).get()
				this.eventList = res.result.data[0].event.map(item => {
					return {
						title: item.event,
						desc: item.timestring,
						clientid: item.clientid,
					}
				})
				this.loading = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.stepsItem {
		line-height: 40px !important;
	}
</style>
